<!-- src/views/withstand/WithstandList.vue -->
<template>
    <v-scale-screen width="1920" height="1080" :fullScreen="true">
        <div class="content_wrap">
            <div class="list-container">
                <div class="list-header">
                    <h2 class="list-title">耐压试验记录列表</h2>
                    <div class="header-divider"></div>
                </div>

                <!-- 查询条件区域 -->
                <a-card class="search-card">
                    <a-form :model="queryForm" ref="queryFormRef" layout="inline" class="search-form">
                        <a-row :gutter="24">
                            <a-col :span="6">
                                <a-form-item label="试验日期">
                                    <a-range-picker v-model:value="queryForm.dateRange" style="width: 100%"
                                        placeholder="请选择日期范围" />
                                </a-form-item>
                            </a-col>

                            <a-col :span="6">
                                <a-form-item label="试验人员">
                                    <a-input v-model:value="queryForm.experimentPersonnel" placeholder="请输入试验人员" />
                                </a-form-item>
                            </a-col>

                            <a-col :span="6">
                                <a-form-item label="监督人员">
                                    <a-input v-model:value="queryForm.supervisor" placeholder="请输入监督人员" />
                                </a-form-item>
                            </a-col>

                            <a-col :span="6">
                                <a-form-item class="search-buttons">
                                    <a-button type="primary" @click="handleSearch" class="search-btn">
                                        <template #icon>
                                            <SearchOutlined />
                                        </template>
                                        查询
                                    </a-button>
                                    <a-button @click="handleReset" class="reset-btn">
                                        <template #icon>
                                            <RedoOutlined />
                                        </template>
                                        重置
                                    </a-button>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </a-card>

                <!-- 操作按钮区域 -->
                <div class="action-bar">
                    <a-button type="primary" @click="goToAdd" size="large" class="action-btn">
                        <template #icon>
                            <PlusOutlined />
                        </template>
                        新增记录
                    </a-button>
                    <a-button @click="handleExport" class="export-btn">
                        <template #icon>
                            <DownloadOutlined />
                        </template>
                        导出数据
                    </a-button>
                </div>

                <!-- 数据表格 -->
                <a-card class="list-card">
                    <a-table :dataSource="testData" :columns="columns" :pagination="pagination" :loading="loading"
                        class="test-table" size="middle" @change="handleTableChange">
                        <template #bodyCell="{ column, record }">
                            <template v-if="column.dataIndex === 'experimentDate'">
                                <span>{{ formatDate(record.experimentDate) }}</span>
                            </template>
                            <template v-else-if="column.dataIndex === 'status'">
                                <a-tag :color="getStatusColor(record.status)">
                                    {{ getStatusText(record.status) }}
                                </a-tag>
                            </template>
                            <template v-else-if="column.dataIndex === 'action'">
                                <a-space>
                                    <a-button type="primary" size="small" @click="viewDetail(record)">查看</a-button>
                                    <a-button type="default" size="small" @click="editRecord(record)">编辑</a-button>
                                    <a-popconfirm title="确定要删除这条记录吗?" @confirm="deleteRecord(record.id)">
                                        <a-button type="danger" size="small">删除</a-button>
                                    </a-popconfirm>
                                </a-space>
                            </template>
                        </template>
                    </a-table>
                </a-card>
            </div>
        </div>
    </v-scale-screen>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import {
    PlusOutlined,
    SearchOutlined,
    RedoOutlined,
    DownloadOutlined
} from '@ant-design/icons-vue'
import VScaleScreen from "v-scale-screen"

const router = useRouter()
const loading = ref(false)
const queryFormRef = ref()

// 查询条件
const queryForm = reactive({
    dateRange: [],
    experimentPersonnel: '',
    supervisor: ''
})

// 分页配置
const pagination = reactive({
    current: 1,
    pageSize: 10,
    total: 0,
    showSizeChanger: true,
    pageSizeOptions: ['10', '20', '50'],
    showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条记录`
})

// 表格列定义
const columns = [
    {
        title: '序号',
        dataIndex: 'id',
        key: 'id',
        width: 80,
        align: 'center'
    },
    {
        title: '试验日期',
        dataIndex: 'experimentDate',
        key: 'experimentDate',
        sorter: true,
        width: 120
    },
    {
        title: '试验人员',
        dataIndex: 'experimentPersonnel',
        key: 'experimentPersonnel'
    },
    {
        title: '监督人员',
        dataIndex: 'supervisor',
        key: 'supervisor'
    },
    {
        title: '耐压时间(分钟)',
        dataIndex: 'withstandTime',
        key: 'withstandTime',
        align: 'right'
    },
    {
        title: '电压值(kV)',
        dataIndex: 'voltageValue',
        key: 'voltageValue',
        align: 'right'
    },
    {
        title: '局放上限(pC)',
        dataIndex: 'partialDischargeLimit',
        key: 'partialDischargeLimit',
        align: 'right'
    },
    {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        width: 100
    },
    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        width: 200,
        fixed: 'right'
    }
]

// 模拟数据
const testData = ref([])

// 获取状态文本
const getStatusText = (status) => {
    const statusMap = {
        0: '待开始',
        1: '进行中',
        2: '已完成',
        3: '已取消'
    }
    return statusMap[status] || '未知'
}

// 获取状态颜色
const getStatusColor = (status) => {
    const colorMap = {
        0: 'default',
        1: 'processing',
        2: 'success',
        3: 'error'
    }
    return colorMap[status] || 'default'
}

// 格式化日期
const formatDate = (date) => {
    if (!date) return '-'
    const d = new Date(date)
    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
}

// 获取数据
const fetchData = () => {
    loading.value = true
    // 模拟API调用
    setTimeout(() => {
        testData.value = [
            {
                id: 1,
                experimentDate: '2023-10-15',
                experimentPersonnel: '张三',
                supervisor: '李四',
                withstandTime: 60,
                voltageValue: 250,
                partialDischargeLimit: 100,
                status: 2
            },
            {
                id: 2,
                experimentDate: '2023-10-16',
                experimentPersonnel: '王五',
                supervisor: '赵六',
                withstandTime: 45,
                voltageValue: 220,
                partialDischargeLimit: 80,
                status: 1
            },
            {
                id: 3,
                experimentDate: '2023-10-17',
                experimentPersonnel: '孙七',
                supervisor: '周八',
                withstandTime: 30,
                voltageValue: 180,
                partialDischargeLimit: 60,
                status: 0
            },
            {
                id: 4,
                experimentDate: '2023-10-18',
                experimentPersonnel: '张三',
                supervisor: '李四',
                withstandTime: 60,
                voltageValue: 250,
                partialDischargeLimit: 100,
                status: 3
            },
            {
                id: 5,
                experimentDate: '2023-10-19',
                experimentPersonnel: '王五',
                supervisor: '赵六',
                withstandTime: 45,
                voltageValue: 220,
                partialDischargeLimit: 80,
                status: 2
            }
        ]
        pagination.total = testData.value.length
        loading.value = false
    }, 500)
}

// 表格分页、排序、筛选变化
const handleTableChange = (pag, filters, sorter) => {
    pagination.current = pag.current
    pagination.pageSize = pag.pageSize
    fetchData()
}

// 查询
const handleSearch = () => {
    pagination.current = 1
    fetchData()
    message.success('查询成功')
}

// 重置
const handleReset = () => {
    queryFormRef.value.resetFields()
    pagination.current = 1
    fetchData()
    message.info('已重置查询条件')
}

// 导出数据
const handleExport = () => {
    message.info('正在导出数据...')
    // 模拟导出操作
    setTimeout(() => {
        message.success('数据导出成功')
    }, 1000)
}

// 跳转到新增页面
const goToAdd = () => {
    router.push('/add')
}

// 查看详情
const viewDetail = (record) => {
    message.info(`查看记录 ${record.id}`)
    // 可以跳转到详情页面
}

// 编辑记录
const editRecord = (record) => {
    message.info(`编辑记录 ${record.id}`)
    // 可以跳转到编辑页面
}

// 删除记录
const deleteRecord = (id) => {
    message.success(`删除记录 ${id} 成功`)
    // 实际项目中需要调用API删除数据
    fetchData()
}

onMounted(() => {
    fetchData()
})
</script>

<style scoped>
.content_wrap {
    width: 100%;
    height: 100%;
    color: #333333;
    padding: 20px;
    box-sizing: border-box;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
    display: flex;
    flex-direction: column;
}

.list-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e5e5;
    position: relative;
    overflow: hidden;
    max-width: 1800px;
    margin: 0 auto;
    width: 100%;
}

.list-header {
    position: relative;
    z-index: 1;
    margin-bottom: 24px;
}

.list-title {
    color: #333333;
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 16px;
}

.header-divider {
    height: 2px;
    background: linear-gradient(90deg, transparent, #666666, transparent);
    width: 100%;
    margin: 0 auto 20px;
}

.search-card {
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    background: #fafafa;
    border: 1px solid #e8e8e8;
}

.search-form {
    padding: 20px 0;
}

.search-buttons {
    display: flex;
    gap: 10px;
}

.search-btn {
    background: #1890ff;
    border-color: #1890ff;
}

.reset-btn {
    background: #f5f5f5;
    border-color: #d9d9d9;
    color: #333333;
}

.action-bar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.export-btn {
    background: #52c41a;
    border-color: #52c41a;
    color: white;
}

.action-btn {
    min-width: 160px;
    height: 48px;
    font-size: 16px;
    border-radius: 6px;
    transition: all 0.3s;
}

.list-card {
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    flex: 1;
    overflow: hidden;
}

.test-table {
    margin-top: 0;
}

:deep(.ant-table-thead > tr > th) {
    background-color: #f0f5ff;
    font-weight: 600;
    color: #333333;
    padding: 16px 8px;
}

:deep(.ant-table-tbody > tr > td) {
    padding: 12px 8px;
    transition: all 0.3s;
}

:deep(.ant-table-tbody > tr:hover) {
    background-color: #f0f8ff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

:deep(.ant-table-pagination) {
    margin: 20px 0;
}

:deep(.ant-form-item-label > label) {
    color: #333333;
    font-weight: 500;
}

@media (max-width: 768px) {
    .list-container {
        padding: 24px 16px;
    }

    .list-title {
        font-size: 24px;
    }

    .action-btn {
        min-width: 130px;
        height: 42px;
        font-size: 14px;
    }

    .action-bar {
        flex-direction: column;
        gap: 10px;
    }

    :deep(.ant-row) {
        flex-direction: column;
        row-gap: 16px !important;
    }

    :deep(.ant-col) {
        width: 100%;
        max-width: 100%;
    }

    .search-buttons {
        justify-content: center;
    }
}
</style>